<template>
	<view class="mx-16">
		<view class="flex flex-col " v-for="(item,index) in pageList" :key="index">
			<view class="mt-16 mb-12 time">
				{{ item.yearMonth }}
			</view>
			<view class=" imgList "
				style="display: grid; grid-gap: 2px 2px;  grid-template-columns: auto auto auto auto;  grid-template-rows: auto auto auto auto; ">
				<view class="item" v-for="(citem,cindex) in item.timeArr" :key="cindex">
					<video class="img item" v-if="citem.message.type == 4"
						@click="$pub.go(`pages_message/videoPlay/videoPlay?url=${citem.content}`)"
						:show-center-play-btn='false' :show-fullscreen-btn="false" :controls="true" disabled
						:src="citem.message.content"
						poster="https://gimg3.baidu.com/topone/src=https%3A%2F%2Fbkimg.cdn.bcebos.com%2Fsmart%2F29381f30e924b899a9013b24e2490a950a7b020858d5-bkimg-process%2Cv_1%2Crw_16%2Crh_9%2Cmaxl_640%2Cpad_1%3Fx-bce-process%3Dimage%2Fformat%2Cf_auto&refer=http%3A%2F%2Fwww.baidu.com&app=2011&size=f200,200&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1692118800&t=789b528f199161aa0b0dda4a95e03e40"></video>
					<image class="img item" @click="pre(item.timeArr,cindex)" v-if="citem.message.type == 2"
						:src="citem.message.content" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState, //先导入mapState方法
		mapMutations,
		mapActions,
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				uid: uni.getStorageSync("userid"),
				friend: null,
				albumWidth: 0,
				videoShow: true,
				pageList: [],
				urls2: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
			}
		},
		computed: {
			...mapState('m_message', ['talkList', 'messageSession']),
			imgAndVideo() {
				return this.talkList.filter((i) => {
					return (
						i.message.type == 2 || i.message.type == 4
					)
				})
			},
		},
		methods: {
			namePageList(result) {
				console.log(result, "result");
				let fnArr = [];
				let chatType = this.friend.chatType
				let userId = this.uid
				let id = null
				if (this.friend.from) {
					id = this.friend.from
				}
				if (this.friend.groupId) {
					id = this.friend.groupId
				}
				if (this.friend.chatType == "2" || this.friend.chatType == 2) {
					fnArr = result.filter((message) => {
						return (
							(message.from === userId && message.to === id) ||
							(message.from === id && message.to === userId)
						);
					})
				} else {
					fnArr = result.filter((message) => {
						if (message.groupId && message.groupId == id) {
							return true;
						}
					})
				}
				console.log(fnArr, "fnArr");
				return fnArr

			},
			getpageList() {
				let timeArr = []
				let result = null
				timeArr = this.namePageList(this.imgAndVideo)
				// 创建一个对象来保存分组后的数据
				let groupedData = {};
				// 遍历原始数组，按照年份和月份分组
				timeArr.forEach(item => {
					const date = new Date(item.createTime);
					const yearMonth = `${date.getFullYear()}年${date.getMonth() + 1}月`;
					if (!groupedData[yearMonth]) {
						groupedData[yearMonth] = {
							yearsAndMonths: yearMonth,
							timeArr: []
						};
					}
					groupedData[yearMonth].timeArr.push(item);
				});
				result = Object.values(groupedData);
				return result

			},
			pre(list, index) {
				let urls = list.map((i) => {
					if (i.msgType == 1) {
						return i.content;
					}
					return null; // 返回 null 表示条件不满足
				}).filter(url => url !== null);
				console.log(urls, 'urls');
				console.log(index, 'index');
				uni.previewImage({
					current: index, //预览图片的下标
					urls: urls //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		},
		onLoad(options) {
			console.log(options, "op");
			if (options.query) {
				this.friend = JSON.parse(options.query.friend)
			} else {
				this.friend = JSON.parse(options.friend)
			}
		},
		onShow() {
			this.pageList = this.getpageList()
			this.videoShow = true
		},
		onUnload() {
			this.videoShow = false
		},
	}
</script>

<style lang="scss">
	.u-album__row__wrapper {
		image {
			border-radius: 8px;
		}
	}
</style>

<style lang="scss" scoped>
	.time {
		color: #A0A0A0;
		font-family: PingFang SC;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 12px;
	}

	.item {
		width: 84px;
		height: 84px;
		border-radius: 8px;
	}

	.img {
		width: 84px;
		height: 84px;
		border-radius: 8px;
	}

	.imgList {
		// max-width: 344px;
	}
</style>